From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 11:46:57 +0200 Subject: ui: Split App container into separate components This change splits the App container into separate pages, as a starting point for removing much of the unnecessary state from Redux. --- .../projects/[project]/topologies/[topology].js | 81 ++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js new file mode 100644 index 00000000..28db1531 --- /dev/null +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -0,0 +1,81 @@ +/* + * Copyright (c) 2021 AtLarge Research + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in all + * copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + * SOFTWARE. + */ + +import { useRouter } from 'next/router' +import { useProject } from '../../../../data/project' +import { useDispatch, useSelector } from 'react-redux' +import React, { useEffect } from 'react' +import { openProjectSucceeded } from '../../../../redux/actions/projects' +import { HotKeys } from 'react-hotkeys' +import { KeymapConfiguration } from '../../../../hotkeys' +import Head from 'next/head' +import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer' +import LoadingScreen from '../../../../components/app/map/LoadingScreen' +import MapStage from '../../../../containers/app/map/MapStage' +import ScaleIndicatorContainer from '../../../../containers/app/map/controls/ScaleIndicatorContainer' +import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent' +import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer' +import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer' + +/** + * Page that displays a datacenter topology. + */ +function Topology() { + const router = useRouter() + const { project: projectId, topology: topologyId } = router.query + + const project = useProject(projectId) + const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC' + + const dispatch = useDispatch() + useEffect(() => { + if (projectId) { + dispatch(openProjectSucceeded(projectId)) + } + }, [projectId, topologyId, dispatch]) + + const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') + + return ( + + + {title} + + + {topologyIsLoading ? ( +
+ +
+ ) : ( +
+ + + + + +
+ )} + + ) +} + +export default Topology -- cgit v1.2.3 From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 16:27:49 +0200 Subject: ui: Migrate project APIs to React Query This change updates the OpenDC frontend to use React Query for fetching and mutating project data. Previously, this state was tracked and synchronized via Redux. Migrating to React Query greatly simplifies the state synchronization logic necessary in the frontend. --- .../src/pages/projects/[project]/topologies/[topology].js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 28db1531..a9dfdb19 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,6 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' import React, { useEffect } from 'react' -import { openProjectSucceeded } from '../../../../redux/actions/projects' import { HotKeys } from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' @@ -35,6 +34,7 @@ import ScaleIndicatorContainer from '../../../../containers/app/map/controls/Sca import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent' import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer' import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer' +import { openProjectSucceeded } from '../../../../redux/actions/projects' /** * Page that displays a datacenter topology. @@ -43,7 +43,7 @@ function Topology() { const router = useRouter() const { project: projectId, topology: topologyId } = router.query - const project = useProject(projectId) + const { data: project } = useProject(projectId) const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC' const dispatch = useDispatch() -- cgit v1.2.3 From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 14 Jul 2021 22:23:40 +0200 Subject: feat(ui): Migrate to PatternFly 4 design framework This change is a rewrite of the existing OpenDC frontend in order to migrate to the PatternFly 4 design framework. PatternFly is used by Red Hat for various computing related services such as OpenShift, Red Hat Virtualization and Cockpit. Since their design requirements are very similar to those of OpenDC (modeling computing services), migrating to PatternFly 4 allows us to re-use design choices from these services. See https://www.patternfly.org/v4/ for more information about PatternFly. --- .../projects/[project]/topologies/[topology].js | 73 +++++++++++++++------- 1 file changed, 50 insertions(+), 23 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index a9dfdb19..5873ed11 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -23,18 +23,29 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' -import React, { useEffect } from 'react' +import React, { useEffect, useState } from 'react' import { HotKeys } from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' -import AppNavbarContainer from '../../../../containers/navigation/AppNavbarContainer' -import LoadingScreen from '../../../../components/app/map/LoadingScreen' -import MapStage from '../../../../containers/app/map/MapStage' -import ScaleIndicatorContainer from '../../../../containers/app/map/controls/ScaleIndicatorContainer' -import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent' -import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer' -import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer' +import MapStage from '../../../../components/app/map/MapStage' import { openProjectSucceeded } from '../../../../redux/actions/projects' +import { AppPage } from '../../../../components/AppPage' +import { + Bullseye, + Drawer, + DrawerContent, + DrawerContentBody, + EmptyState, + EmptyStateIcon, + Spinner, + Title, +} from '@patternfly/react-core' +import { zoomInOnCenter } from '../../../../redux/actions/map' +import Toolbar from '../../../../components/app/map/controls/Toolbar' +import { useMapScale } from '../../../../data/map' +import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator' +import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar' +import Collapse from '../../../../components/app/map/controls/Collapse' /** * Page that displays a datacenter topology. @@ -44,7 +55,6 @@ function Topology() { const { project: projectId, topology: topologyId } = router.query const { data: project } = useProject(projectId) - const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC' const dispatch = useDispatch() useEffect(() => { @@ -54,27 +64,44 @@ function Topology() { }, [projectId, topologyId, dispatch]) const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') + const scale = useMapScale() + const interactionLevel = useSelector((state) => state.interactionLevel) + + const [isExpanded, setExpanded] = useState(true) + const panelContent = setExpanded(false)} /> return ( - + - {title} + {project?.name ?? 'Topologies'} - OpenDC - {topologyIsLoading ? ( -
- -
+ + + + + Loading Topology + + + ) : ( -
- - - - - -
+ + + + + + + dispatch(zoomInOnCenter(zoomIn))} + onExport={() => window['exportCanvasToImage']()} + /> + setExpanded(true)} /> + + + + )} - + ) } -- cgit v1.2.3 From e5caf6c6122684e441d1d73e2e0507fdd36c67e0 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Fri, 16 Jul 2021 14:20:34 +0200 Subject: feat(ui): Support panning of the datacenter topology This change enables support for panning the visualized datacenter topology by using the mouse or holding shortcuts. Previously, this could only be done through repeated key presses. --- .../src/pages/projects/[project]/topologies/[topology].js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 5873ed11..786bed07 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,7 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' import React, { useEffect, useState } from 'react' -import { HotKeys } from 'react-hotkeys' +import {configure, HotKeys} from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' import MapStage from '../../../../components/app/map/MapStage' @@ -70,6 +70,11 @@ function Topology() { const [isExpanded, setExpanded] = useState(true) const panelContent = setExpanded(false)} /> + // Make sure that holding down a key will generate repeated events + configure({ + ignoreRepeatedEventsWhenKeyHeldDown: false + }) + return ( -- cgit v1.2.3 From f2aeecccc096728d3df955b71e711c8d9c429427 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Fri, 16 Jul 2021 17:37:01 +0200 Subject: refactor(ui): Isolate world coordinate space This change updates the topology view in the OpenDC frontend to isolate the world coordinate space. This means that zooming and panning should not affect the coordinates in world space (but only in camera space). In turn, this allows us to remove the dependency on Redux for the camera controls. --- .../src/pages/projects/[project]/topologies/[topology].js | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 786bed07..d79e8e7a 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,7 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' import React, { useEffect, useState } from 'react' -import {configure, HotKeys} from 'react-hotkeys' +import { configure, HotKeys } from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' import MapStage from '../../../../components/app/map/MapStage' @@ -40,9 +40,7 @@ import { Spinner, Title, } from '@patternfly/react-core' -import { zoomInOnCenter } from '../../../../redux/actions/map' import Toolbar from '../../../../components/app/map/controls/Toolbar' -import { useMapScale } from '../../../../data/map' import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator' import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar' import Collapse from '../../../../components/app/map/controls/Collapse' @@ -64,7 +62,6 @@ function Topology() { }, [projectId, topologyId, dispatch]) const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') - const scale = useMapScale() const interactionLevel = useSelector((state) => state.interactionLevel) const [isExpanded, setExpanded] = useState(true) @@ -72,7 +69,7 @@ function Topology() { // Make sure that holding down a key will generate repeated events configure({ - ignoreRepeatedEventsWhenKeyHeldDown: false + ignoreRepeatedEventsWhenKeyHeldDown: false, }) return ( @@ -95,11 +92,6 @@ function Topology() { - - dispatch(zoomInOnCenter(zoomIn))} - onExport={() => window['exportCanvasToImage']()} - /> setExpanded(true)} /> -- cgit v1.2.3 From 54d07120191eb81de91a49cdebf619cfecce2666 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 19 Jul 2021 14:45:25 +0200 Subject: refactor(ui): Encode state in topology actions This change updates the OpenDC frontend to reduce its reliance of global state during the execution of actions. Actions that modify the topology now require parameters to be passed via the action constructor instead of relying on the global interactionLevel state. --- .../opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 2 -- 1 file changed, 2 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index d79e8e7a..139c2979 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -40,8 +40,6 @@ import { Spinner, Title, } from '@patternfly/react-core' -import Toolbar from '../../../../components/app/map/controls/Toolbar' -import ScaleIndicator from '../../../../components/app/map/controls/ScaleIndicator' import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar' import Collapse from '../../../../components/app/map/controls/Collapse' -- cgit v1.2.3 From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 19 Jul 2021 15:47:23 +0200 Subject: refactor(ui): Restructure components per page This change updates the source structure of the OpenDC frontend to follow the page structure. --- .../projects/[project]/topologies/[topology].js | 123 ++++++++++++++++----- 1 file changed, 97 insertions(+), 26 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index 139c2979..a1d6ac7e 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -23,25 +23,37 @@ import { useRouter } from 'next/router' import { useProject } from '../../../../data/project' import { useDispatch, useSelector } from 'react-redux' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { configure, HotKeys } from 'react-hotkeys' import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' -import MapStage from '../../../../components/app/map/MapStage' import { openProjectSucceeded } from '../../../../redux/actions/projects' import { AppPage } from '../../../../components/AppPage' import { + Breadcrumb, + BreadcrumbItem, Bullseye, + Divider, Drawer, DrawerContent, DrawerContentBody, EmptyState, EmptyStateIcon, + PageSection, + PageSectionVariants, Spinner, + Tab, + TabContent, + Tabs, + TabTitleText, + Text, + TextContent, Title, } from '@patternfly/react-core' -import TopologySidebar from '../../../../components/app/sidebars/topology/TopologySidebar' -import Collapse from '../../../../components/app/map/controls/Collapse' +import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' +import MapStage from '../../../../components/topologies/map/MapStage' +import Collapse from '../../../../components/topologies/map/controls/Collapse' +import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar' /** * Page that displays a datacenter topology. @@ -59,10 +71,29 @@ function Topology() { } }, [projectId, topologyId, dispatch]) + const [activeTab, setActiveTab] = useState('overview') + const overviewRef = useRef(null) + const floorPlanRef = useRef(null) + const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') const interactionLevel = useSelector((state) => state.interactionLevel) const [isExpanded, setExpanded] = useState(true) + + const breadcrumb = ( + + + Projects + + + Project details + + + Topology + + + ) + const panelContent = setExpanded(false)} /> // Make sure that holding down a key will generate repeated events @@ -71,31 +102,71 @@ function Topology() { }) return ( - + {project?.name ?? 'Topologies'} - OpenDC - {topologyIsLoading ? ( - - - - - Loading Topology - - - - ) : ( - - - - - - setExpanded(true)} /> - - - - - )} + + + Topology + + + + + setActiveTab(tabIndex)} + className="pf-m-page-insets" + > + Overview} + tabContentId="overview" + tabContentRef={overviewRef} + /> + Floor Plan} + tabContentId="floor-plan" + tabContentRef={floorPlanRef} + /> + + + + + Test + + + ) } -- cgit v1.2.3 From 28d6d13844db28745bc2813e87a367131f862070 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Mon, 19 Jul 2021 20:59:11 +0200 Subject: refactor(ui): Move page components in separate files --- .../projects/[project]/topologies/[topology].js | 53 ++-------------------- 1 file changed, 5 insertions(+), 48 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index a1d6ac7e..f95b18ed 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -21,39 +21,28 @@ */ import { useRouter } from 'next/router' +import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useProject } from '../../../../data/project' -import { useDispatch, useSelector } from 'react-redux' +import { useDispatch } from 'react-redux' import React, { useEffect, useRef, useState } from 'react' -import { configure, HotKeys } from 'react-hotkeys' -import { KeymapConfiguration } from '../../../../hotkeys' import Head from 'next/head' import { openProjectSucceeded } from '../../../../redux/actions/projects' import { AppPage } from '../../../../components/AppPage' import { Breadcrumb, BreadcrumbItem, - Bullseye, Divider, - Drawer, - DrawerContent, - DrawerContentBody, - EmptyState, - EmptyStateIcon, PageSection, PageSectionVariants, - Spinner, Tab, TabContent, Tabs, TabTitleText, Text, TextContent, - Title, } from '@patternfly/react-core' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' -import MapStage from '../../../../components/topologies/map/MapStage' -import Collapse from '../../../../components/topologies/map/controls/Collapse' -import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar' +import TopologyMap from '../../../../components/topologies/TopologyMap' /** * Page that displays a datacenter topology. @@ -75,11 +64,6 @@ function Topology() { const overviewRef = useRef(null) const floorPlanRef = useRef(null) - const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1') - const interactionLevel = useSelector((state) => state.interactionLevel) - - const [isExpanded, setExpanded] = useState(true) - const breadcrumb = ( @@ -94,13 +78,6 @@ function Topology() { ) - const panelContent = setExpanded(false)} /> - - // Make sure that holding down a key will generate repeated events - configure({ - ignoreRepeatedEventsWhenKeyHeldDown: false, - }) - return ( @@ -134,7 +111,7 @@ function Topology() { - Test + -- cgit v1.2.3 From ebab0cc12e293a57cbc58d2dd51b3c9d7cd4ee92 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 20 Jul 2021 14:55:39 +0200 Subject: fix(ui): Load correct topology view This change fixes an issue where the only the default topology view would be shown to the user. --- .../src/pages/projects/[project]/topologies/[topology].js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index f95b18ed..c2753144 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -26,7 +26,6 @@ import { useProject } from '../../../../data/project' import { useDispatch } from 'react-redux' import React, { useEffect, useRef, useState } from 'react' import Head from 'next/head' -import { openProjectSucceeded } from '../../../../redux/actions/projects' import { AppPage } from '../../../../components/AppPage' import { Breadcrumb, @@ -43,6 +42,7 @@ import { } from '@patternfly/react-core' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import TopologyMap from '../../../../components/topologies/TopologyMap' +import { openTopology } from '../../../../redux/actions/topologies' /** * Page that displays a datacenter topology. @@ -55,10 +55,10 @@ function Topology() { const dispatch = useDispatch() useEffect(() => { - if (projectId) { - dispatch(openProjectSucceeded(projectId)) + if (topologyId) { + dispatch(openTopology(topologyId)) } - }, [projectId, topologyId, dispatch]) + }, [topologyId, dispatch]) const [activeTab, setActiveTab] = useState('overview') const overviewRef = useRef(null) -- cgit v1.2.3 From 7f083b47c2e2333819823fd7835332a0f486b626 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 21 Jul 2021 17:31:45 +0200 Subject: feat(ui): Toggle to Floor Plan on room select --- .../projects/[project]/topologies/[topology].js | 29 +++++++++++----------- 1 file changed, 14 insertions(+), 15 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index c2753144..ae26ae83 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -24,7 +24,7 @@ import { useRouter } from 'next/router' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useProject } from '../../../../data/project' import { useDispatch } from 'react-redux' -import React, { useEffect, useRef, useState } from 'react' +import React, { useEffect, useState } from 'react' import Head from 'next/head' import { AppPage } from '../../../../components/AppPage' import { @@ -42,6 +42,7 @@ import { } from '@patternfly/react-core' import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import TopologyMap from '../../../../components/topologies/TopologyMap' +import { goToRoom } from '../../../../redux/actions/interaction-level' import { openTopology } from '../../../../redux/actions/topologies' /** @@ -61,8 +62,6 @@ function Topology() { }, [topologyId, dispatch]) const [activeTab, setActiveTab] = useState('overview') - const overviewRef = useRef(null) - const floorPlanRef = useRef(null) const breadcrumb = ( @@ -95,31 +94,31 @@ function Topology() { onSelect={(_, tabIndex) => setActiveTab(tabIndex)} className="pf-m-page-insets" > - Overview} - tabContentId="overview" - tabContentRef={overviewRef} - /> + Overview} tabContentId="overview" /> Floor Plan} tabContentId="floor-plan" - tabContentRef={floorPlanRef} /> - - + -- cgit v1.2.3 From f84dc9f8b8b4eaa7621f9ee4fc83ef38a85c431b Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Tue, 17 Aug 2021 11:30:29 +0200 Subject: feat(ui): Add context selectors This change adds context selectors for the OpenDC frontend where the user can select different projects, portfolios or topologies from the context selection bar. --- .../src/pages/projects/[project]/topologies/[topology].js | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies') diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index ae26ae83..858f9b16 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -21,6 +21,9 @@ */ import { useRouter } from 'next/router' +import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' +import ProjectSelector from '../../../../components/context/ProjectSelector' +import TopologySelector from '../../../../components/context/TopologySelector' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useProject } from '../../../../data/project' import { useDispatch } from 'react-redux' @@ -77,8 +80,15 @@ function Topology() { ) + const contextSelectors = ( + + + + + ) + return ( - + {project?.name ?? 'Topologies'} - OpenDC -- cgit v1.2.3